<template>
  <div>
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu
            :default-active="route.fullPath"
            class="el-menu-vertical-demo"
            style="height: 100vh;"
            :router="true"
        >
          <template v-for="data in datalist" :key="data.path">
            <el-sub-menu :index="data.path" v-if="data.children.length&&cheakAuth(data.path)">
              <template #title>
                <el-icon>
                  <component :is="mapIcons[data.icon]"></component>
                </el-icon>
                <span>{{data.title}}</span>
              </template>
             <template v-for="item in data.children" :key="item.path">
               <el-menu-item :index="item.path" v-if="cheakAuth(item.path)">
                 <el-icon>
                   <component :is="mapIcons[item.icon]"></component>
                 </el-icon>
                 <span>{{item.title}}</span>
               </el-menu-item>
             </template>
            </el-sub-menu>
            <el-menu-item :index="data.path" v-else-if="cheakAuth(data.path)">
              <el-icon>
                <component :is="mapIcons[data.icon]"></component>
              </el-icon>
              <span>{{data.title}}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-scrollbar>
    </el-aside>
  </div>
</template>

<script setup>
import {onMounted,ref} from "vue";
import axios from "axios";
import {
  List,
  UploadFilled,
  OfficeBuilding,
  Key,
  User,
  HomeFilled,
} from '@element-plus/icons-vue';
import {useRoute} from "vue-router";
import {useUserStore} from "../../store/useUserStore.js"
const route=useRoute()

onMounted(()=>{
  getList()
})

const datalist=ref([])
const getList=async ()=>{
  var res=await axios.get("/adminapi/rights")
  // var res=await axios.get("/rights.json")
  // console.log(res.data)
  datalist.value=res.data
}
//图标映射
const mapIcons={
  List,
  UploadFilled,
  OfficeBuilding,
  Key,
  User,
  HomeFilled,
}
//权限配置
const {user}=useUserStore()
const cheakAuth=(path)=>{
  return user.role.rights.includes(path)
}
</script>